<!--
 * @Author: jiu yin
 * @Date: 2024-04-22 21:45:55
 * @LastEditTime: 2024-04-26 16:58:22
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\components\audio_custom\index.vue
 * jiu
-->
<template>
	<view class="audio-show" :style="style">
		<image class="audio-poster" :src="ossurl(fileDeploy.ai.avatar)" />
		<view class="play-slider">
			<slider
				@change="sliderChange"
				@changing="sliderChanging"
				class="slider"
				block-size="16"
				:min="0"
				:max="duration"
				:value="currentTime"
				block-color="#0CCA92"
				activeColor="#0CCA92"
				backgroundColor="#fff"
			/>
			<view class="detail-time">
				<view>{{ timer }}</view>
				<view>{{ overTimer }}</view>
			</view>
		</view>
		<image v-if="playShow" @click="handleAudio()" class="audio-btn" src="/static/images/pause.png" />
		<image v-else @click="handleAudio()" class="audio-btn" src="/static/images/play.png" />
	</view>
</template>
<script>
	import { ossurl } from '@/utils/index';
	export default {
		props: ['src', 'style', 'autoplay'],

		data() {
			return {
				playShow: false, //播放的图片
				lock: false, // 锁
				currentTime: 1, //当前进度
				duration: 0, // 总进度
				audioContext: null,
			};
		},
		created() {
			this.audioContext = uni.createInnerAudioContext();
		},
		computed: {
			timer() {
				return this.calcTimer(this.currentTime);
			},
			overTimer() {
				return this.calcTimer(this.duration);
			},
			fileDeploy() {
				return this.$store.getters.fileDeploy;
			},
		},
		mounted() {
			this.onCanplay();
			this.onTimeUpdate();
			this.onEnded();
			this.audioContext.src = this.src;
			this.currentTime = 0;
		},
		methods: {
         ossurl,
			calcTimer(timer) {
				if (timer === 0 || typeof timer !== 'number') {
					return '00:00';
				}
				let mm = Math.floor(timer / 60) + '';
				let ss = Math.floor(timer % 60) + '';
				mm = mm.padStart(2, '0');
				ss = ss.padStart(2, '0');
				return mm + ':' + ss;
			},
			// 播放
			play() {
				if (!this.audioContext.duration) return;
				this.audioContext.play();
				this.playShow = true;
			},
			// 暂停
			stop() {
				this.audioContext.pause();
				this.playShow = false;
			},
			handleAudio() {
				this.playShow = !this.playShow;
				this.playShow ? this.play() : this.stop();
				this.$emit('handleAudio', this.playShow);
			},
			// 拖动进度条
			sliderChange(data) {
				this.audioContext.seek(data.detail.value);
				this.play();
			},
			//拖动中
			sliderChanging(data) {
				this.currentTime = data.detail.value;
			},
			//加载完毕监听
			onCanplay() {
				const audioContext = this.audioContext;
				audioContext.onCanplay((e) => {
					console.log('canplaying', audioContext.duration, this.duration);
					if (audioContext.duration) {
						this.duration = ~~audioContext.duration;
						return;
					}
					let time = setInterval(() => {
						audioContext.play();
						if (!this.autoplay) {
							audioContext.pause();
						}
						if (audioContext.duration) {
							this.duration = ~~audioContext.duration;
							console.log(this.duration);
							clearInterval(time);
						}
					}, 500);
				});
			},
			// 播放中监听
			onTimeUpdate() {
				this.audioContext.onTimeUpdate((e) => {
					this.currentTime = ~~this.audioContext.currentTime;
				});
			},

			// 播放结束监听
			onEnded() {
				this.audioContext.onEnded(() => {
					this.playShow = false;
					this.currentTime = 0;
				});
			},
			reset_audio() {
				this.audioContext.seek(0);
				this.audioContext.stop();
			},
		},
		beforeDestroy() {
			this.stop();
			this.audioContext = null;
		},
	};
</script>
<style lang="scss" scoped>
	.audio-show {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: linear-gradient(-90deg, rgba(15, 188, 214, 0.2) 0%, rgba(12, 202, 145, 0.2) 100%);
		border-radius: 24rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);

		.audio-poster {
			width: 96rpx;
			height: 96rpx;
		}

		.audio-btn {
			width: 56rpx;
			height: 56rpx;
		}

		.play-slider {
			width: 76%;
			position: relative;

			.detail-time {
				position: absolute;
				bottom: -20rpx;
				width: 88%;
				padding: 0 50rpx 0 30rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
</style>
